<template>
    <div id="contain" class="content-inner">
        <!-- 内容区头部 -->
        <header class="pageme-header">
            <!-- 面包屑 -->
            <Breadcrumb>
                <BreadcrumbItem to="/admin/home">主页</BreadcrumbItem>
                <BreadcrumbItem>类别管理</BreadcrumbItem>
            </Breadcrumb>
        </header>
        <div class="content-main">
            <!-- 内容区域显示部分 -->
            <div class="contain-main-show">
              <!-- 新增类别 -->
              <div class="add-type">
                <Button type="primary" @click="modal1 = true"><Icon type="ios-add-circle-outline" /> 一级类别</Button>
                <Button type="primary" @click="modal2 = true"><Icon type="ios-add-circle-outline" /> 二级类别</Button>
                <!-- 新增一级类别 -->
                <Modal
                  v-model="modal1"
                  title="新增一级类别"
                  @on-ok="ok"
                  @on-cancel="cancel">
                  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="top">
                      <FormItem label="一级类别名" prop="tName">
                          <Input v-model="formValidate.tName" placeholder="请输入一级类别名" clearable/>
                      </FormItem>
                      <FormItem>
                          <Button type="primary" @click="saveOne('formValidate')">保存</Button>
                          <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                      </FormItem>
                  </Form>
                </Modal>
                <!-- 新增二级类别 -->
                  <Modal
                    v-model="modal2"
                    title="新增二级类别"
                    @on-ok="ok"
                    @on-cancel="cancel">
                    <div class="add-typeTwo">
                      <h6>请先选择一级类别</h6>
                      <div class="type-all">
                        <a-radio-group @change="onChange" v-model="value">
                            <a-radio :style="radioStyle" :value="item.tId"
                            v-for="item in typeOne" :key="item.tId">
                                <span class="default">{{item.tName}}</span>
                            </a-radio>
                        </a-radio-group>
                      </div>
                      <Form ref="formValidateTwo" :model="formValidateTwo" :rules="ruleValidateTwo" label-position="top">
                          <FormItem label="二级类别名" prop="tName">
                              <Input v-model="formValidateTwo.tName" placeholder="请输入二级类别名" clearable/>
                          </FormItem>
                          <FormItem>
                              <Button type="primary" @click="saveTwo('formValidateTwo')">保存</Button>
                              <Button @click="handleReset('formValidateTwo')" style="margin-left: 8px">重置</Button>
                          </FormItem>
                      </Form>
                    </div>
                </Modal>
                <!-- 编辑一级类别模态框 -->
                <Modal
                  v-model="modal3"
                  title="修改一级类别"
                  @on-ok="ok"
                  @on-cancel="cancel">
                  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="top">
                      <FormItem label="一级类别名" prop="tName">
                          <Input v-model="formValidate.tName" placeholder="请输入一级类别名" clearable/>
                      </FormItem>
                      <FormItem>
                          <Button type="primary" @click="updateOne('formValidate', typeOneDetail.tId)">保存</Button>
                          <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                      </FormItem>
                  </Form>
                </Modal>
                <!-- 编辑二级类别 -->
                <Modal
                  v-model="modal4"
                  title="编辑二级类别"
                  @on-ok="ok"
                  @on-cancel="cancel">
                  <div class="add-typeTwo">
                    <h6>请先选择一级类别</h6>
                    <div class="type-all">
                      <a-radio-group @change="onChange" v-model="value">
                          <a-radio :style="radioStyle" :value="item.tId"
                          v-for="item in typeOne" :key="item.tId">
                              <span class="default">{{item.tName}}</span>
                          </a-radio>
                      </a-radio-group>
                    </div>
                    <Form ref="formValidateTwo" :model="formValidateTwo" :rules="ruleValidateTwo" label-position="top">
                        <FormItem label="二级类别名" prop="tName">
                            <Input v-model="formValidateTwo.tName" placeholder="请输入二级类别名" clearable/>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="updateTwo('formValidateTwo', typeTwoDetail.tId, typeTwoDetail.tParentId)">保存</Button>
                            <Button @click="handleReset('formValidateTwo')" style="margin-left: 8px">重置</Button>
                        </FormItem>
                      </Form>
                    </div>
                </Modal>
              </div>
              <!-- 类别列表 -->
              <div>
                  <a-collapse v-model="activeKey" :expandIconPosition="expandIconPosition">
                    <a-collapse-panel :header="item.tName" v-for="(item,i) in typeOne" :key="i.toString()">
                      <!-- 二级类别 -->
                      <div class="type-two" v-for="itemTwo in item.child" :key="itemTwo.tId">
                        <div class="typeinfo-left">
                          <span>{{itemTwo.tName}}</span>
                          <span class="create-time">{{itemTwo.tCreateTime | dataFormat}}</span>
                        </div>
                        <div class="typeinfo-right">
                          <a class="edit" href="javascript:void(0);" @click.prevent="findTypeTwo(itemTwo.tId)"><Icon type="md-create" /> 编辑</a>
                          <span class="line"></span>
                          <a class="delete" href="javascript:void(0);" @click.prevent="deleteById(itemTwo.tId)"><Icon type="ios-trash-outline" /> 删除</a>
                        </div>
                      </div>
                      <!-- 一级类别操作链接 -->
                      <a-icon slot="extra" type="setting" @click="handleClick" />
                      <a class="edit-typeOne" href="javascript:void(0);" slot="extra" @click.prevent="findTypeByTid(item.tId)"><Icon type="md-create" /></a>
                    </a-collapse-panel>
                  </a-collapse>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'types',
  data () {
    return {
      activeKey: ['0'],
      expandIconPosition: 'left',
      typeOne: [],
      typeTwo: [],
      modal1: false,
      modal2: false,
      modal3: false,
      modal4: false,
      value: 0, // 单选框默认选中值
      typeOneDetail: '',
      typeTwoDetail: '',
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      formValidate: {
        tName: ''
      },
      ruleValidate: {
        tName: [
          { required: true, message: '一级类别名称不能为空', trigger: 'blur' }
        ]
      },
      formValidateTwo: {
        tName: ''
      },
      ruleValidateTwo: {
        tName: [
          { required: true, message: '二级类别名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    activeKey (key) {
      console.log(key)
    }
  },
  created () {
    this.findOneLevels()
  },
  methods: {
    // 单选框选中事件
    onChange (e) {
      console.log('radio checked', e.target.value)
      console.log(this.value)
    },
    ok () {
      this.findOneLevels()
    },
    cancel () {
      this.findOneLevels()
    },
    // 新增一级类别
    saveOne (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'types/save',
            method: 'post',
            params: {
              tName: this.formValidate.tName,
              tIsParent: 1
            },
            headers: {
              Authorization: localStorage.getItem('adminToken')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$Message.success(res.data.msg)
              this.formValidate.tName = ''
            } else if (res.data.code === 401) {
              this.$Message.error(res.data.msg)
              this.formValidate.tName = ''
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    // 新增二级类别
    saveTwo (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'types/save',
            method: 'post',
            params: {
              tName: this.formValidateTwo.tName,
              tIsParent: 0,
              tParentId: this.value
            },
            headers: {
              Authorization: localStorage.getItem('adminToken')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$Message.success(res.data.msg)
              this.formValidateTwo.tName = ''
            } else if (res.data.code === 401) {
              this.$Message.error(res.data.msg)
              this.formValidateTwo.tName = ''
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    // 根据id查找此一级商品类别详情
    findTypeByTid (id) {
      this.modal3 = true
      this.$axios({
        url: 'types/findById/' + id,
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.typeOneDetail = res.data.object
          this.formValidate.tName = res.data.object.tName
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 修改一级类别
    updateOne (name, id) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'types/update',
            method: 'get',
            params: {
              tId: id,
              tName: this.formValidate.tName,
              tIsParent: 1
            },
            headers: {
              Authorization: localStorage.getItem('adminToken')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$Message.success(res.data.msg)
              this.formValidate.tName = ''
            } else if (res.data.code === 401) {
              this.$Message.error(res.data.msg)
              this.formValidate.tName = ''
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    // 根据id查找此二级商品类别详情
    findTypeTwo (id) {
      this.modal4 = true
      this.$axios({
        url: 'types/findById/' + id,
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.typeTwoDetail = res.data.object
          this.formValidateTwo.tName = res.data.object.tName
          this.value = res.data.object.tParentId
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 修改二级类别
    updateTwo (name, id, parent) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'types/update',
            method: 'get',
            params: {
              tId: id,
              tName: this.formValidateTwo.tName,
              tParentId: parent,
              tIsParent: 0
            },
            headers: {
              Authorization: localStorage.getItem('adminToken')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$Message.success(res.data.msg)
              this.formValidateTwo.tName = ''
            } else if (res.data.code === 401) {
              this.$Message.error(res.data.msg)
              this.formValidateTwo.tName = ''
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    // 根据id删除商品类别
    deleteById (id) {
      this.$axios({
        url: 'types/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findOneLevels()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 折叠面板显示与隐藏
    handleClick (event) {
      event.stopPropagation()
    },
    // 查询所有一级商品类别与二级商品类别
    findOneLevels () {
      this.$axios({
        url: 'types/findOneLevels',
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.typeOne = res.data.list
          this.typeOne.forEach(item => {
            this.$axios({
              url: 'types/findTwoLevels/' + item.tId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // 加入二级类别
                this.$set(item, 'child', res.data.list)
              }
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>

/* 主要内容区域 */
.content-inner{
    width: 100%;
    height: calc(100% - 60px);
    min-height: 495px;
}
/* 内容区头部 */
header.pageme-header{
    width: 100%;
    height: 50px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    line-height: 50px;
    padding-left: 20px;
}
/* 内容区域 */
.content-main{
    width: 100%;
    height:auto;
    padding: 15px;
}
/* 内容区域显示部分 */
.contain-main-show{
    width: 100%;
    height: auto;
}
.add-type {
  margin: 10px 0 15px 0;
}
.type-two {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.create-time {
  margin-left: 20px;
}
.line {
    display: inline-block;
    height: 12px;
    margin: 2px 12px;
    border-right: 1px solid #979797;
}
.typeinfo-right {
  font-size: 12px;
}
.edit {
  color:orange;
}
.delete {
  color: #ef4238;
}
.edit-typeOne {
  font-size: 15px;
  display: inline-block;
  margin: 0 8px;
  color:orange;
}
.delete-typeOne {
  font-size: 15px;
  display: inline-block;
  margin: 0 8px 0 0;
  color: #ef4238;
}
.add-typeTwo h6 {
  font-size: 15px;
}
.type-all {
  padding: 20px;
}
</style>
